<template>
	<view class="container">
		<view class="map-container">
			<map 
				id="myMap"
				class="map"
				:latitude="startLat" 
				:longitude="startLng"
				:markers="markers"
				:polyline="polyline"
				scale="14"
				show-location
			></map>
			<button class="btn arrive-btn" @tap="reachDestination">确认到达目的地</button>
		</view>
	</view>
</template>
<script>
	import QQMapWX from '../../common/qqmap-wx-jssdk.js'
	import {confirmEnd} from '@/request/order.js'
	export default {
		data() {
			return {
				startLat:null,
				startLng:null,
				endLat:null,
				endLng:null,
				driverId:null,
				//定位api
				qqmapsdk:null,
				// 地图标记点
				markers: [],
				// 路线
				polyline: []
			}
		},
		methods: {
			//创建地图
			initMap() {
				// 创建司机位置标记
				const driverMarker = {
					id: 0,
					latitude: this.startLat,
					longitude: this.startLng,
					iconPath: '/static/car-icon.png',
					width: 60,
					height: 60
				}
				console.log(this.startLat,this.startLng,11111111111)
				// 创建接乘点标记
				const pickupMarker = {
					id: 1,
					latitude: this.startLat,
					longitude: this.startLng,
					iconPath: '/static/pickup-icon.png',
					width: 30,
					height: 30,
					callout: {
						content: '接乘点',
						color: '#000000',
						fontSize: 12,
						borderRadius: 5,
						bgColor: '#ffffff',
						padding: 5,
						display: 'ALWAYS'
					}
				}
				console.log(this.endLat,this.endLng,22222222222)
				// 创建目的地标记
				const destinationMarker = {
					id: 2,
					latitude: this.endLat,
					longitude: this.endLng,
					iconPath: '/static/destination-icon.png',
					width: 30,
					height: 30,
					callout: {
						content: '目的地',
						color: '#000000',
						fontSize: 12,
						borderRadius: 5,
						bgColor: '#ffffff',
						padding: 5,
						display: 'ALWAYS'
					}
				}
				this.markers = [driverMarker, pickupMarker, destinationMarker]
				this.plotRoute(this.startLat, this.startLng, this.endLat, this.endLng)
				this.startLocationWatch();
			},
			//实时获得司机的位置
			// 开始监听位置变化
			startLocationWatch() {
				uni.startLocationUpdate({
					success: () => {
						console.log('开始监听位置变化');
					},
					fail: (err) => {
						console.error('监听位置失败：', err);
					}
				});
				
				// 监听位置变化事件
				uni.onLocationChange((res) => {
					// 更新起点位置
					this.startLat = res.latitude;
					this.startLng = res.longitude;
					// 更新起点标记
					this.updateStartMarker();
					// 检查是否到达目的地
					this.checkArrival();
					// 如果还没到达目的地，继续规划路线
					if (!this.isArrived) {
						this.plotRoute(res.latitude,res.longitude,this.endLat,this.endLng);
					}
				});
			},
			// 更新起点标记-随着用户的移动而移动
			updateStartMarker() {
				const startMarker = {
					id: 0,
					latitude: this.startLat,
					longitude: this.startLng,
					iconPath: '/static/car-icon.png',
					width: 40,
					height: 40,
					callout: {
						content: '当前位置',
						color: '#000000',
						fontSize: 14,
						borderRadius: 4,
						padding: 5,
						display: 'ALWAYS'
					}
				};
			},
			// 检查是否到达目的地
			checkArrival() {
				const distance = this.getMapDistance(
					this.startLat,
					this.startLng,
					this.endLat,
					this.endLng
				);
				// 如果距离小于50米，认为到达目的地
				if (distance < 100 && !this.isArrived) {
					this.isArrived = true;
					uni.showToast({
						title: '已到达目的地',
						icon: 'success',
						duration: 2000
					});
					// 停止位置更新
					uni.stopLocationUpdate();
					uni.offLocationChange();
				}
			},
			plotRoute(startLat,startLng,endLat,endLng){
				//使用定位api，这里不需要再次初始化qqmapsdk，因为已经在onLoad中初始化过了
				
				// 检查坐标是否有效
				if(!startLat || !startLng || !endLat || !endLng) {
					console.error('坐标无效，无法规划路线', startLat, startLng, endLat, endLng);
					return;
				}
				console.log('规划路线起点:', startLat, startLng);
				console.log('规划路线终点:', endLat, endLng);
				
				// 创建路线
				this.qqmapsdk.direction({
					mode: 'driving', //可选值：'driving'（驾车）、'walking'（步行）、'bicycling'（骑行），不填默认：'driving',可不填
					//from参数不填默认当前地址
					from: `${startLat},${startLng}`,
					to: `${endLat},${endLng}`,
					success: (res) => {
						console.log('路线规划成功:', res);
						if(!res.result || !res.result.routes || !res.result.routes[0] || !res.result.routes[0].polyline) {
							console.error('路线数据格式不正确');
							return;
						}
						
						const ret = res;
						const coors = ret.result.routes[0].polyline;
						const pl = [];
						
						//坐标解压（返回的点串坐标，通过前向差分进行压缩）
						const kr = 1000000;
						for (let i = 2; i < coors.length; i++) {
							coors[i] = Number(coors[i - 2]) + Number(coors[i]) / kr;
						}
						
						//将解压后的坐标放入点串数组pl中
						for (let i = 0; i < coors.length; i += 2) {
							pl.push({
								latitude: coors[i],
								longitude: coors[i + 1]
							})
						}
						
						console.log('解压后的路线点数:', pl.length);
						
						// 确保路线点数组不为空
						if(pl.length > 0) {
							// 更新路线数据
							this.polyline = [{
								points: pl,
								color: '#009a00dd',
								width: 10,
								arrowLine: true // 显示箭头
							}];
							console.log('路线已更新');
						} else {
							console.error('路线点数组为空');
						}
					},
					fail: (error) => {
						console.error('路线规划失败:', error);
					},
					complete: (res) => {
						console.log('路线规划完成');
					}
				});
			},
			//确认已送达到达
			reachDestination(){
				console.log(1111111111111111111111);
				const userInfo = uni.getStorageSync('userInfo');
				this.driverId = userInfo.driverId;
				confirmEnd(this.driverId).then(res => {
					console.log(res);
					if(res == null){
						uni.showToast({
							title: '网络错误',
							icon: 'none'
						});
						return;
					}
					uni.showToast({
						title: '行程结束',
						icon: 'none'
					});
					uni.navigateTo({
						url: '/pages/finishOrder/finishOrder?data=' + encodeURIComponent(JSON.stringify(res))
					})
				});
				
			},
			//进行经纬度转换为距离的计算
			Rad(d) {
				return d * Math.PI / 180.0; //经纬度转换成三角函数中度分表形式。
			},
			
			/*
			 计算距离，参数分别为第一点的纬度，经度；第二点的纬度，经度
			 默认单位km
			*/
			getMapDistance(lat1, lng1, lat2, lng2) {
				// console.log("in getMap")
				// console.log(lat1)
				var radLat1 = this.Rad(lat1);
				var radLat2 = this.Rad(lat2);
				var a = radLat1 - radLat2;
				var b = this.Rad(lng1) - this.Rad(lng2);
				var s = 2 * Math.asin(Math.sqrt(Math.pow(Math.sin(a / 2), 2) +
					Math.cos(radLat1) * Math.cos(radLat2) * Math.pow(Math.sin(b / 2), 2)));
				s = s * 6378.137; // EARTH_RADIUS;
				s = Math.round(s * 10000) / 10000; //输出为公里
				s = s.toFixed(1);//保留一位小数
				console.log(s,11111111111111111111111111111);
				return s;
			},
		},
		onLoad(options){
			console.log(options);
			if (options.startLat && options.startLng && options.endLat && options.endLng) {
				this.startLat = parseFloat(options.startLat);
				this.startLng = parseFloat(options.startLng);
				this.endLat = parseFloat(options.endLat)
				this.endLng = parseFloat(options.endLng);
			}
			console.log(this.startLat,this.startLng,this.endLat,this.endLng);
			// 初始化QQ地图SDK
			this.qqmapsdk = new QQMapWX({
				key: 'YYEBZ-FORCG-OEPQO-QE3GI-FW6SK-3JBTR'
			});
			this.initMap();
		}
	}
</script>

<style scoped>
.container {
	height: 100vh;
	display: flex;
	flex-direction: column;
	background-color: #f8f8f8;
}
 
/* 地图区域 */
.map-container {
	height: 100%;
	width: 100%;
	position: relative; /* 添加相对定位 */
}
 
.map {
	width: 100%;
	height: 100%;
}
 
.btn.arrive-btn {
	position: absolute; /* 绝对定位 */
	bottom: 20px; /* 距离底部 20px */
	left: 50%; /* 水平居中 */
	transform: translateX(-50%); /* 水平居中 */
	z-index: 999; /* 确保按钮在地图上方 */
	background-color: #1B6EF3; /* 按钮背景色 */
	color: white; /* 按钮文字颜色 */
	padding: 10px 20px; /* 按钮内边距 */
	border-radius: 5px; /* 按钮圆角 */
	border: none; /* 移除边框 */
}
</style>
